import { ref } from "vue"

export function useLocalStorage(key: string, defaultValue = "") {
  const storageValue = localStorage.getItem(key);
  if (!storageValue) {
    localStorage.setItem(key, defaultValue);
  }
  const value = ref(storageValue || defaultValue);

  function setValue(newValue: string) {
    localStorage.setItem(key, newValue);
    value.value = newValue;
  }

  return {
    value, setValue
  }
}